<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
        <script src="../vuejs/vue.min.js"></script>
        <script src="sql.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="file"  id="dbFileEle"/>
            <button type="button" class="btn btn-primary" onclick="getdata()">基本按钮</button>
            <button type="button" class="btn btn-success" onclick="testData()">成功</button> 
            <h1 id="output">12121212</h1>
        </div>
    </body>

    <script>
        var tableCreate = function () {
            function valconcat(vals, tagName) {
              if (vals.length === 0) return '';
              var open = '<'+tagName+'>', close='</'+tagName+'>';
              return open + vals.join(close + open) + close;
            }
            return function (columns, values){
              var tbl  = document.createElement('table');
              var html = '<thead>' + valconcat(columns, 'th') + '</thead>';
              var rows = values.map(function(v){ return valconcat(v, 'td'); });
              html += '<tbody>' + valconcat(rows, 'tr') + '</tbody>';
                tbl.innerHTML = html;
              return tbl;
            }
        }();

        var outputEle = document.getElementById('output');

        var dbFileElm = document.getElementById('dbFileEle');
        dbFileElm.onchange = function() {
        var f = dbFileElm.files[0];
        var r = new FileReader();
        r.onload = function() {
            var Uints = new Uint8Array(r.result);
            db = new SQL.Database(Uints);
            var c = db.exec("SELECT * FROM t_userServiceCfg");

            // for(var i=0; i<c.length; i++){
            //     console.log(111);
            //     console.log(c[i].columns);
            //     console.log(222);
            //     console.log(c[i].values);
            //     console.log(333);
            // }
            // alert('hello');

            outputEle.innerHTML = "";
            for(var i=0; i<c.length; i++){
                outputEle.appendChild(tableCreate(c[i].columns, c[i].values));
            }
        }
        r.readAsArrayBuffer(f);
    }
    </script>
</html>